import React from "react";
import Filter from "./Filter";
import { HandleOperation } from "../../../common/core/decorator";
import { Layout } from "antd";
// import ObjectkeysTable from "src/common/components/widgets/ObjectkeysTable";
import { ServiceFactory, servicesEnum } from "src/services/service-factory";
import { ExampleService } from "src/services";
import PaginationTable from "src/common/components/tables/PagationTable";
const { Header, Content } = Layout;

class State {
  public total = 0
  public data:any[] = []
}

class Page1 extends React.Component<any, State> {
  public state = new State()
  public service = ServiceFactory.current.getService<ExampleService>(servicesEnum.exampleService)

  private queryCatch:any = {}

  public render() {
    return (
      <Layout>
        <Header style={{ background: 'white' }}>
          <Filter immediately={true} onSubmit={() => this.handleSubmit()} />
        </Header>
        <Content style={{ background: 'white' }}>
          {/* <ObjectkeysTable dataSource={this.state.data} /> */}
          <PaginationTable immediately={true} onChange={(current, pageSize) => this.handleSubmit({ current, pageSize })} />
        </Content>
        Page2
      </Layout>
    )
  }

  @HandleOperation()
  private async handleSubmit(query:any = {}){
    this.queryCatch = {...this.queryCatch, ...query}
    console.log(31, this.queryCatch)
    const { data, total } = await this.service.queryResources(this.queryCatch)
    this.setState({total, data})
  }
}

export default Page1